<template>
  <div class="box">
    <router-link :to="{path:'/goodsInfo',query:{id:id}}"
                 target="_blank">
      <div class="img">
        <img src="@/assets/lazyload.jpg"
             :data-src="imgSrc"
             alt="商品图片"
             ref="img">
      </div>
      <div class="content">
        <p>{{ goodsName }}</p>
        <span>￥</span><span>{{ goodsPrice }}</span>
      </div>
      <hr>
      <div class="user">
        <img src="@/assets/lazyload.jpg"
             :data-src="userImg"
             class="userImg"
             ref="userImg">
        <span class="username">{{ goodsUser }}</span>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  props: ['imgSrc', 'imgAlt', 'goodsName', 'goodsPrice', 'goodsUser', 'id'],
  data () {
    return {
      isDelete: false,
      top: 0,
      img: '',
      user: '',
      userImg: '',
    }
  },
  computed: {
    pageHeight () {
      return this.$store.getters.pageHeight
    }
  },
  watch: {
    pageHeight (val) {
      this.change(val)
    }
  },
  created () {
    this.$http.post('http://localhost:3000/userInfo', { username: this.goodsUser }).then(response => {
      this.userImg = response.data.data.userImg;
      this.$nextTick(() => {
        this.img = this.$refs.img
        this.user = this.$refs.userImg
        this.top = this.img.getBoundingClientRect().top
        this.change(this.pageHeight)
      });
    });
  },
  methods: {
    change (val) {
      if (this.top <= val) {
        this.img.src = this.img.getAttribute('data-src');
        this.user.src = this.user.getAttribute('data-src');
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  position: relative;
  display: inline-block;
  border: 1px solid #ccc;
  width: 200px;
  margin: 10px 10px 0 0;

  .img {
    width: 200px;
    height: 200px;
    overflow: hidden;

    img {
      height: 200px;
      transition: all 0.2s ease-in-out;
    }
  }
  .img:hover {
    img {
      height: 220px;
    }
  }
  .content {
    font-size: 14px;
    margin: 5px;

    p {
      height: 19px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 5px;
    }
  }
  .user {
    margin: 5px;
    font-size: 12px;

    .userImg {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
    .username {
      vertical-align: 4px;
    }
  }
}
</style>